<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css动画效果</title>
    <style>
        html,body{
            height: 100%;
        }

        div{
            width: 30px;
            height: 30px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            /*calc()计算位置.*/
            left: calc(50% - 15px);
            top: calc(50% - 15px);
        }

        section{
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 50%;
            position: absolute;
            left: calc(50% + 15px);
            top: calc(50% - 50px);

            animation: myRotate 5s infinite linear;

            animation-name: myRotate , colors;

            /*animation-duration: 5s;*/

            animation-timing-function: linear;

            animation-iteration-count: infinite;

            /*修改元素的原始定位点. 默认是元素的中心点. 所以rotate是围绕元素中心点旋转的.*/
            transform-origin: -15px 50px ;
        }

        @keyframes myRotate{
            /*from相当于0%, to相当于100%*/
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }    
        }

        @keyframes colors{
            0%{
                background-color: red;
            }

            10%{
                background-color: rosybrown;
            }

            20%{
                background-color: royalblue;
            }

            30%{
                background-color: saddlebrown;
            }

            40%{
                background-color: sandybrown;
            }

            50%{
                background-color: seagreen;
            }

            60%{
                background-color: silver;
            }

            70%{
                background-color: slategray;
            }

            80%{
                background-color: springgreen;
            }

            90%{
                background-color: blueviolet;
            }
            100%{
                background-color: darkblue;
            }
        }
    </style>
</head>
<body>
    <div>
        
    </div>
    <section>
        
    </section>
</body>
</html>